 <template>
  <div id="app" class="container ">
    <div class="header text-center">
      <h1 >图书管理</h1>
      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          <input type="text" class="form-control" placeholder="请输入关键字" v-model="handle.search">
        </div>
        <div class="col-md-2 col-md-offset-1">
          <button class="btn btn-default btn-block" @click="handle.addNew = true" >增加图书</button>
        </div>
      </div>
    </div>
    <book-list :navtionBooks="books"  :handle="handle" @updateData="getData"></book-list>
    <h4 class="text-center" v-show="!books.length">没有数据</h4>
  </div>
  
</template>

<style type="text/css">
  .header {
    margin: 20px 0;
  }

</style>

<script>
  import BookList from './components/bookList.vue'
  export default {
    data () {
      return {
        books: [],
        handle: {
          search: '',
          addNew: false,
          updateBook: false
        }
      }
    },
    mounted () {
      this.getData()
    },
    components: {
      BookList
    },
    methods: {
      getData () {
        this.$http.get('http://localhost:8080/fetch').then( (res) => {
          this.books = res.data
        })
      } 
    }
  }

</script>